/** 
 
*/
import React, { PropTypes, PureComponent, Fragment } from 'react';
import { SelectC } from '../../../comps';
import { connect } from 'dva';
import myStyle from './index.less';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message } from 'antd';
@Form.create()
class RelatedRulesC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      rulesData: [], // 规则列表数据
      choosedData: [], //已选择的列表数据
      choosedAndFilterData: [], // 已选择并筛选后的列表数据
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    this.queryRelatedRules(); //获取关联规则列表
  }
  //获取关联规则下拉
  queryRelatedRules = () => {
    const { tenant, modalType, choosedData, ruleId } = this.props;
    this.props.dispatch({
      type: 'limitManagemen/getRulesData',
      payload: {
        tenant,
        ruleId,
      },
      callback: (data) => {
        const tempData = [];
        data.dataSource.forEach((item) => {
          tempData.push({ title: item.ruleDesc, value: item.ruleId, key: item.ruleNo });
        });
        this.setState(
          {
            rulesData: tempData,
          },
          () => {
            if (modalType != '2') return; //新增返回
            //编辑进行回填
            let temp = [];
            this.state.rulesData &&
              this.state.rulesData.forEach((item) => {
                if (choosedData && choosedData.indexOf(item.value) != '-1') {
                  temp.push(item);
                }
              });
            this.setState({
              choosedAndFilterData: temp,
            });
          },
        );
      },
    });
  };
  selectRulesChange = (e) => {
    let temp = [];
    temp = this.filterRulesData(this.state.rulesData, e);
    this.setState({
      choosedAndFilterData: temp,
      choosedData: e,
    });
  };
  filterRulesData = (arr1, e) => {
    let tempArr = [];
    arr1 &&
      arr1.forEach((item) => {
        if (e.indexOf(item.value) != '-1') {
          tempArr.push(item);
        }
      });
    return tempArr;
  };

  render() {
    const { rulesData, choosedAndFilterData } = this.state;
    return (
      <div className={myStyle.relatedRules}>
        <div style={{ width: '278px' }}>
          <SelectC
            form={this.props.form}
            initialValue={this.props.choosedData}
            isMultiple={true}
            onChange={this.selectRulesChange}
            dataSource={rulesData || []}
            dataIndex={'rules'}
            placeholder={'请选择规则'}
          />
        </div>
        <div className={myStyle.choosedRulesBox}>
          <ul>
            {choosedAndFilterData &&
              choosedAndFilterData.map((item, index) => {
                return (
                  <li className={myStyle.choosedData} key={index}>
                    <span title={item.title}>{item.title}</span>
                  </li>
                );
              })}
          </ul>
        </div>
      </div>
    );
  }
}
export default connect(({ limitManagemen, loading }) => ({
  limitManagemen,
  loading,
}))(RelatedRulesC);
